Next.js ಆ್ಯಪ್ ರೂಟರ್ ಅನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು: ರೂಟ್ ಗ್ರೂಪ್ಸ್ ಮತ್ತು ಪ್ಯಾರಲಲ್ ರೂಟ್ಸ್ ಆರ್ಕಿಟೆಕ್ಚರ್‌ನ ಆಳವಾದ ನೋಟ

Next.js ಆ್ಯಪ್ ರೂಟರ್‌ನ ಬಿಡುಗಡೆಯು, ಜನಪ್ರಿಯ ರಿಯಾಕ್ಟ್ ಫ್ರೇಮ್‌ವರ್ಕ್‌ನೊಂದಿಗೆ ಡೆವಲಪರ್‌ಗಳು ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವ ರೀತಿಯಲ್ಲಿ ಒಂದು ಮಾದರಿ ಬದಲಾವಣೆಯನ್ನು ಗುರುತಿಸಿದೆ. ಪೇಜಸ್ ರೂಟರ್‌ನ ಫೈಲ್-ಆಧಾರಿತ ಸಂಪ್ರದಾಯಗಳಿಂದ ದೂರ ಸರಿದು, ಆ್ಯಪ್ ರೂಟರ್ ಹೆಚ್ಚು ಶಕ್ತಿಶಾಲಿ, ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ಸರ್ವರ್-ಕೇಂದ್ರಿತ ಮಾದರಿಯನ್ನು ಪರಿಚಯಿಸಿತು. ಈ ವಿಕಸನವು ನಮಗೆ ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣ ಮತ್ತು ಸಂಘಟನೆಯೊಂದಿಗೆ ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ರಚಿಸಲು ಅಧಿಕಾರ ನೀಡುತ್ತದೆ. ಪರಿಚಯಿಸಲಾದ ಅತ್ಯಂತ ಪರಿವರ್ತನಾತ್ಮಕ ವೈಶಿಷ್ಟ್ಯಗಳಲ್ಲಿ ರೂಟ್ ಗ್ರೂಪ್ಸ್ ಮತ್ತು ಪ್ಯಾರಲಲ್ ರೂಟ್ಸ್ ಸೇರಿವೆ.

ಎಂಟರ್‌ಪ್ರೈಸ್-ಗ್ರೇಡ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವ ಗುರಿಯನ್ನು ಹೊಂದಿರುವ ಡೆವಲಪರ್‌ಗಳಿಗೆ, ಈ ಎರಡು ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು ಕೇವಲ ಪ್ರಯೋಜನಕಾರಿಯಲ್ಲ - ಇದು ಅತ್ಯಗತ್ಯ. ಅವು ಲೇಔಟ್ ನಿರ್ವಹಣೆ, ರೂಟ್ ಸಂಘಟನೆ ಮತ್ತು ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗಳಂತಹ ಡೈನಾಮಿಕ್, ಬಹು-ಪ್ಯಾನಲ್ ಇಂಟರ್ಫೇಸ್‌ಗಳ ರಚನೆಗೆ ಸಂಬಂಧಿಸಿದ ಸಾಮಾನ್ಯ ಆರ್ಕಿಟೆಕ್ಚರಲ್ ಸವಾಲುಗಳನ್ನು ಪರಿಹರಿಸುತ್ತವೆ. ಈ ಮಾರ್ಗದರ್ಶಿಯು ರೂಟ್ ಗ್ರೂಪ್ಸ್ ಮತ್ತು ಪ್ಯಾರಲಲ್ ರೂಟ್ಸ್‌ನ ಸಮಗ್ರ ಅನ್ವೇಷಣೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ, ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆಗಳಿಂದ ಮುಂದುವರಿದ ಅನುಷ್ಠಾನ ತಂತ್ರಗಳು ಮತ್ತು ಜಾಗತಿಕ ಡೆವಲಪರ್ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳಿಗೆ ಚಲಿಸುತ್ತದೆ.

Next.js ಆ್ಯಪ್ ರೂಟರ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು: ಒಂದು ತ್ವರಿತ ಪುನರಾವಲೋಕನ

ನಾವು ನಿರ್ದಿಷ್ಟತೆಗಳಿಗೆ ಧುಮುಕುವ ಮೊದಲು, ಆ್ಯಪ್ ರೂಟರ್‌ನ ಮೂಲ ತತ್ವಗಳನ್ನು ಸಂಕ್ಷಿಪ್ತವಾಗಿ ಪುನಃ ನೋಡೋಣ. ಇದರ ಆರ್ಕಿಟೆಕ್ಚರ್ ಡೈರೆಕ್ಟರಿ-ಆಧಾರಿತ ವ್ಯವಸ್ಥೆಯ ಮೇಲೆ ನಿರ್ಮಿಸಲ್ಪಟ್ಟಿದೆ, ಅಲ್ಲಿ ಫೋಲ್ಡರ್‌ಗಳು URL ಸೆಗ್ಮೆಂಟ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತವೆ. ಈ ಫೋಲ್ಡರ್‌ಗಳಲ್ಲಿನ ವಿಶೇಷ ಫೈಲ್‌ಗಳು ಆ ಸೆಗ್ಮೆಂಟ್‌ಗಾಗಿ UI ಮತ್ತು ನಡವಳಿಕೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತವೆ:

• page.js: ಒಂದು ರೂಟ್‌ಗಾಗಿ ಪ್ರಾಥಮಿಕ UI ಕಾಂಪೊನೆಂಟ್, ಅದನ್ನು ಸಾರ್ವಜನಿಕವಾಗಿ ಪ್ರವೇಶಿಸುವಂತೆ ಮಾಡುತ್ತದೆ.
• layout.js: ಚೈಲ್ಡ್ ಲೇಔಟ್‌ಗಳು ಅಥವಾ ಪೇಜ್‌ಗಳನ್ನು ಸುತ್ತುವರೆಯುವ UI ಕಾಂಪೊನೆಂಟ್. ಹೆಡರ್‌ಗಳು ಮತ್ತು ಫೂಟರ್‌ಗಳಂತಹ ಬಹು ರೂಟ್‌ಗಳಲ್ಲಿ UI ಅನ್ನು ಹಂಚಿಕೊಳ್ಳಲು ಇದು ನಿರ್ಣಾಯಕವಾಗಿದೆ.
• loading.js: ಪೇಜ್ ವಿಷಯ ಲೋಡ್ ಆಗುತ್ತಿರುವಾಗ ತೋರಿಸಲು ಒಂದು ಐಚ್ಛಿಕ UI, ಇದು ರಿಯಾಕ್ಟ್ ಸಸ್ಪೆನ್ಸ್ ಮೇಲೆ ನಿರ್ಮಿಸಲ್ಪಟ್ಟಿದೆ.
• error.js: ದೋಷಗಳ ಸಂದರ್ಭದಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲು ಒಂದು ಐಚ್ಛಿಕ UI, ಇದು ದೃಢವಾದ ಎರರ್ ಬೌಂಡರಿಗಳನ್ನು ರಚಿಸುತ್ತದೆ.

ಈ ರಚನೆಯು, ರಿಯಾಕ್ಟ್ ಸರ್ವರ್ ಕಾಂಪೊನೆಂಟ್ಸ್ (RSCs) ನ ಡೀಫಾಲ್ಟ್ ಬಳಕೆಯೊಂದಿಗೆ ಸೇರಿ, ಸರ್ವರ್-ಫಸ್ಟ್ ವಿಧಾನವನ್ನು ಪ್ರೋತ್ಸಾಹಿಸುತ್ತದೆ, ಇದು ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ಡೇಟಾ-ಫೆಚಿಂಗ್ ಮಾದರಿಗಳನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ. ರೂಟ್ ಗ್ರೂಪ್ಸ್ ಮತ್ತು ಪ್ಯಾರಲಲ್ ರೂಟ್ಸ್ ಈ ಅಡಿಪಾಯದ ಮೇಲೆ ನಿರ್ಮಿಸಲಾದ ಮುಂದುವರಿದ ಸಂಪ್ರದಾಯಗಳಾಗಿವೆ.

ರೂಟ್ ಗ್ರೂಪ್ಸ್ ಅನ್ನು ಸ್ಪಷ್ಟಪಡಿಸುವುದು: ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಸುವ್ಯವಸ್ಥೆ ಮತ್ತು ವಿಸ್ತರಣೆಗಾಗಿ ಸಂಘಟಿಸುವುದು

ಒಂದು ಅಪ್ಲಿಕೇಶನ್ ಬೆಳೆದಂತೆ, ರೂಟ್‌ಗಳ ಸಂಖ್ಯೆ ಅಗಾಧವಾಗಬಹುದು. ನೀವು ಮಾರ್ಕೆಟಿಂಗ್‌ಗಾಗಿ ಒಂದು ಪುಟಗಳ ಗುಂಪನ್ನು, ಬಳಕೆದಾರರ ದೃಢೀಕರಣಕ್ಕಾಗಿ ಇನ್ನೊಂದು, ಮತ್ತು ಕೋರ್ ಅಪ್ಲಿಕೇಶನ್ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗಾಗಿ ಮೂರನೆಯದನ್ನು ಹೊಂದಿರಬಹುದು. ತಾರ್ಕಿಕವಾಗಿ, ಇವುಗಳು ಪ್ರತ್ಯೇಕ ವಿಭಾಗಗಳಾಗಿವೆ, ಆದರೆ ನಿಮ್ಮ URL ಗಳನ್ನು ಗೊಂದಲಗೊಳಿಸದೆ ನಿಮ್ಮ ಫೈಲ್ ಸಿಸ್ಟಮ್‌ನಲ್ಲಿ ಅವುಗಳನ್ನು ಹೇಗೆ ಸಂಘಟಿಸುತ್ತೀರಿ? ರೂಟ್ ಗ್ರೂಪ್ಸ್ ನಿಖರವಾಗಿ ಈ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸುತ್ತವೆ.

ರೂಟ್ ಗ್ರೂಪ್ಸ್ ಎಂದರೇನು?

ರೂಟ್ ಗ್ರೂಪ್ ಎನ್ನುವುದು URL ರಚನೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರದಂತೆ ನಿಮ್ಮ ಫೈಲ್‌ಗಳು ಮತ್ತು ರೂಟ್ ಸೆಗ್ಮೆಂಟ್‌ಗಳನ್ನು ತಾರ್ಕಿಕ ಗುಂಪುಗಳಾಗಿ ಸಂಘಟಿಸುವ ಒಂದು ಯಾಂತ್ರಿಕತೆಯಾಗಿದೆ. ಫೋಲ್ಡರ್ ಹೆಸರನ್ನು ಆವರಣಗಳಲ್ಲಿ ಸುತ್ತುವ ಮೂಲಕ ನೀವು ರೂಟ್ ಗ್ರೂಪ್ ಅನ್ನು ರಚಿಸುತ್ತೀರಿ, ಉದಾಹರಣೆಗೆ, (marketing) ಅಥವಾ (app).

ಆವರಣಗಳಲ್ಲಿನ ಫೋಲ್ಡರ್ ಹೆಸರು ಸಂಪೂರ್ಣವಾಗಿ ಸಾಂಸ್ಥಿಕ ಉದ್ದೇಶಗಳಿಗಾಗಿರುತ್ತದೆ. URL ಪಥವನ್ನು ನಿರ್ಧರಿಸುವಾಗ Next.js ಇದನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ನಿರ್ಲಕ್ಷಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, app/(marketing)/about/page.js ನಲ್ಲಿರುವ ಫೈಲ್ /about URL ನಲ್ಲಿ ಸೇವೆ ಸಲ್ಲಿಸುತ್ತದೆ, /(marketing)/about ನಲ್ಲಿ ಅಲ್ಲ.

ರೂಟ್ ಗ್ರೂಪ್ಸ್‌ನ ಪ್ರಮುಖ ಉಪಯೋಗಗಳು ಮತ್ತು ಪ್ರಯೋಜನಗಳು

ಸರಳ ಸಂಘಟನೆಯು ಒಂದು ಪ್ರಯೋಜನವಾದರೂ, ರೂಟ್ ಗ್ರೂಪ್ಸ್‌ನ ನಿಜವಾದ ಶಕ್ತಿಯು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ವಿಭಿನ್ನ, ಹಂಚಿದ ಲೇಔಟ್‌ಗಳೊಂದಿಗೆ ವಿಭಾಗಗಳಾಗಿ ವಿಭಜಿಸುವ ಸಾಮರ್ಥ್ಯದಲ್ಲಿದೆ.

1. ರೂಟ್ ಸೆಗ್ಮೆಂಟ್‌ಗಳಿಗಾಗಿ ವಿಭಿನ್ನ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸುವುದು

ಇದು ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಮತ್ತು ಶಕ್ತಿಯುತ ಬಳಕೆಯಾಗಿದೆ. ಎರಡು ಪ್ರಮುಖ ವಿಭಾಗಗಳಿರುವ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ:

• ಜಾಗತಿಕ ಹೆಡರ್ ಮತ್ತು ಫೂಟರ್‌ನೊಂದಿಗೆ ಸಾರ್ವಜನಿಕ-ಮುಖಿ ಮಾರ್ಕೆಟಿಂಗ್ ಸೈಟ್ (ಹೋಮ್, ಅಬೌಟ್, ಪ್ರೈಸಿಂಗ್).
• ಸೈಡ್‌ಬಾರ್, ಬಳಕೆದಾರ-ನಿರ್ದಿಷ್ಟ ನ್ಯಾವಿಗೇಷನ್, ಮತ್ತು ವಿಭಿನ್ನ ಒಟ್ಟಾರೆ ರಚನೆಯೊಂದಿಗೆ ಖಾಸಗಿ, ದೃಢೀಕರಿಸಿದ ಬಳಕೆದಾರ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ (ಡ್ಯಾಶ್‌ಬೋರ್ಡ್, ಸೆಟ್ಟಿಂಗ್ಸ್, ಪ್ರೊಫೈಲ್).

ರೂಟ್ ಗ್ರೂಪ್ಸ್ ಇಲ್ಲದೆ, ಈ ವಿಭಾಗಗಳಿಗೆ ವಿಭಿನ್ನ ರೂಟ್ ಲೇಔಟ್‌ಗಳನ್ನು ಅನ್ವಯಿಸುವುದು ಸಂಕೀರ್ಣವಾಗಿರುತ್ತದೆ. ರೂಟ್ ಗ್ರೂಪ್ಸ್‌ನೊಂದಿಗೆ, ಇದು ನಂಬಲಾಗದಷ್ಟು ಅರ್ಥಗರ್ಭಿತವಾಗಿದೆ. ನೀವು ಪ್ರತಿ ಗುಂಪಿನೊಳಗೆ ಒಂದು ಅನನ್ಯ layout.js ಫೈಲ್ ಅನ್ನು ರಚಿಸಬಹುದು.

ಈ ಸನ್ನಿವೇಶಕ್ಕಾಗಿ ಒಂದು ವಿಶಿಷ್ಟ ಫೈಲ್ ರಚನೆ ಇಲ್ಲಿದೆ:

app/
├── (marketing)/
│   ├── layout.js      // ಮಾರ್ಕೆಟಿಂಗ್ ಹೆಡರ್/ಫೂಟರ್‌ನೊಂದಿಗೆ ಸಾರ್ವಜನಿಕ ಲೇಔಟ್
│   ├── page.js        // '/' ನಲ್ಲಿ ರೆಂಡರ್ ಆಗುತ್ತದೆ
│   └── about/
│       └── page.js    // '/about' ನಲ್ಲಿ ರೆಂಡರ್ ಆಗುತ್ತದೆ
├── (app)/
│   ├── layout.js      // ಸೈಡ್‌ಬಾರ್‌ನೊಂದಿಗೆ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಲೇಔಟ್
│   ├── dashboard/
│   │   └── page.js    // '/dashboard' ನಲ್ಲಿ ರೆಂಡರ್ ಆಗುತ್ತದೆ
│   └── settings/
│       └── page.js    // '/settings' ನಲ್ಲಿ ರೆಂಡರ್ ಆಗುತ್ತದೆ
└── layout.js          // ರೂಟ್ ಲೇಔಟ್ (ಉದಾ., <html> ಮತ್ತು <body> ಟ್ಯಾಗ್‌ಗಳಿಗಾಗಿ)

ಈ ಆರ್ಕಿಟೆಕ್ಚರ್‌ನಲ್ಲಿ:

• (marketing) ಗುಂಪಿನೊಳಗಿನ ಯಾವುದೇ ರೂಟ್ (marketing)/layout.js ನಿಂದ ಸುತ್ತುವರಿಯಲ್ಪಡುತ್ತದೆ.
• (app) ಗುಂಪಿನೊಳಗಿನ ಯಾವುದೇ ರೂಟ್ (app)/layout.js ನಿಂದ ಸುತ್ತುವರಿಯಲ್ಪಡುತ್ತದೆ.
• ಎರಡೂ ಗುಂಪುಗಳು ರೂಟ್ app/layout.js ಅನ್ನು ಹಂಚಿಕೊಳ್ಳುತ್ತವೆ, ಇದು ಜಾಗತಿಕ HTML ರಚನೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಪರಿಪೂರ್ಣವಾಗಿದೆ.

2. ಒಂದು ಸೆಗ್ಮೆಂಟ್ ಅನ್ನು ಹಂಚಿದ ಲೇಔಟ್‌ನಿಂದ ಹೊರಗಿಡುವುದು

ಕೆಲವೊಮ್ಮೆ, ಒಂದು ನಿರ್ದಿಷ್ಟ ಪುಟ ಅಥವಾ ವಿಭಾಗವು ಪೋಷಕ ಲೇಔಟ್‌ನಿಂದ ಸಂಪೂರ್ಣವಾಗಿ ಹೊರಬರಬೇಕಾಗುತ್ತದೆ. ಒಂದು ಸಾಮಾನ್ಯ ಉದಾಹರಣೆಯೆಂದರೆ ಚೆಕ್‌ಔಟ್ ಪ್ರಕ್ರಿಯೆ ಅಥವಾ ಮುಖ್ಯ ಸೈಟ್‌ನ ನ್ಯಾವಿಗೇಷನ್ ಹೊಂದಿರದ ವಿಶೇಷ ಲ್ಯಾಂಡಿಂಗ್ ಪುಟ. ಉನ್ನತ-ಮಟ್ಟದ ಲೇಔಟ್ ಅನ್ನು ಹಂಚಿಕೊಳ್ಳದ ಗುಂಪಿನಲ್ಲಿ ರೂಟ್ ಅನ್ನು ಇರಿಸುವ ಮೂಲಕ ನೀವು ಇದನ್ನು ಸಾಧಿಸಬಹುದು. ಇದು ಸಂಕೀರ್ಣವೆಂದು ತೋರುತ್ತದೆಯಾದರೂ, ಇದರರ್ಥ ರೂಟ್ ಗುಂಪಿಗೆ ತನ್ನದೇ ಆದ ಉನ್ನತ-ಮಟ್ಟದ layout.js ಅನ್ನು ನೀಡುವುದು, ಅದು ರೂಟ್ ಲೇಔಟ್‌ನಿಂದ `children` ಅನ್ನು ರೆಂಡರ್ ಮಾಡುವುದಿಲ್ಲ.

ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆ: ಬಹು-ಲೇಔಟ್ ಅಪ್ಲಿಕೇಶನ್ ನಿರ್ಮಿಸುವುದು

ಮೇಲೆ ವಿವರಿಸಿದ ಮಾರ್ಕೆಟಿಂಗ್/ಆ್ಯಪ್ ರಚನೆಯ ಕನಿಷ್ಠ ಆವೃತ್ತಿಯನ್ನು ನಿರ್ಮಿಸೋಣ.

1. ರೂಟ್ ಲೇಔಟ್ (app/layout.js)

ಈ ಲೇಔಟ್ ಕನಿಷ್ಠವಾಗಿದ್ದು, ಪ್ರತಿಯೊಂದು ಪುಟಕ್ಕೂ ಅನ್ವಯಿಸುತ್ತದೆ. ಇದು ಅತ್ಯಗತ್ಯ HTML ರಚನೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="kn">
      <body>{children}</body>
    </html>
  );
}

2. ಮಾರ್ಕೆಟಿಂಗ್ ಲೇಔಟ್ (app/(marketing)/layout.js)

ಈ ಲೇಔಟ್ ಸಾರ್ವಜನಿಕ-ಮುಖಿ ಹೆಡರ್ ಮತ್ತು ಫೂಟರ್ ಅನ್ನು ಒಳಗೊಂಡಿದೆ.

// app/(marketing)/layout.js
export default function MarketingLayout({ children }) {
  return (
    <div>
      <header>ಮಾರ್ಕೆಟಿಂಗ್ ಹೆಡರ್</header>
      <main>{children}</main>
      <footer>ಮಾರ್ಕೆಟಿಂಗ್ ಫೂಟರ್</footer>
    </div>
  );
}

3. ಆ್ಯಪ್ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಲೇಔಟ್ (app/(app)/layout.js)

ಈ ಲೇಔಟ್ ವಿಭಿನ್ನ ರಚನೆಯನ್ನು ಹೊಂದಿದೆ, ಇದು ದೃಢೀಕರಿಸಿದ ಬಳಕೆದಾರರಿಗಾಗಿ ಸೈಡ್‌ಬಾರ್ ಅನ್ನು ಒಳಗೊಂಡಿದೆ.

// app/(app)/layout.js
export default function AppLayout({ children }) {
  return (
    <div style={{ display: 'flex' }}>
      <aside style={{ width: '200px', borderRight: '1px solid #ccc' }}>
        ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಸೈಡ್‌ಬಾರ್
      </aside>
      <main style={{ flex: 1, padding: '20px' }}>{children}</main>
    </div>
  );
}

ಈ ರಚನೆಯೊಂದಿಗೆ, /about ಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವುದು ಪುಟವನ್ನು `MarketingLayout` ನೊಂದಿಗೆ ರೆಂಡರ್ ಮಾಡುತ್ತದೆ, ಆದರೆ /dashboard ಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವುದು ಅದನ್ನು `AppLayout` ನೊಂದಿಗೆ ರೆಂಡರ್ ಮಾಡುತ್ತದೆ. URL ಸ್ವಚ್ಛ ಮತ್ತು ಶಬ್ದಾರ್ಥವಾಗಿ ಉಳಿಯುತ್ತದೆ, ಆದರೆ ನಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ನ ಫೈಲ್ ರಚನೆಯು ಸಂಪೂರ್ಣವಾಗಿ ಸಂಘಟಿತ ಮತ್ತು ವಿಸ್ತರಿಸಬಲ್ಲದಾಗಿದೆ.

ಪ್ಯಾರಲಲ್ ರೂಟ್ಸ್‌ನೊಂದಿಗೆ ಡೈನಾಮಿಕ್ UI ಗಳನ್ನು ಅನ್ಲಾಕ್ ಮಾಡುವುದು

ರೂಟ್ ಗ್ರೂಪ್ಸ್ ಅಪ್ಲಿಕೇಶನ್‌ನ ವಿಭಿನ್ನ ವಿಭಾಗಗಳನ್ನು ಸಂಘಟಿಸಲು ಸಹಾಯ ಮಾಡಿದರೆ, ಪ್ಯಾರಲಲ್ ರೂಟ್ಸ್ ವಿಭಿನ್ನ ಸವಾಲನ್ನು ಪರಿಹರಿಸುತ್ತದೆ: ಒಂದೇ ಲೇಔಟ್‌ನಲ್ಲಿ ಬಹು, ಸ್ವತಂತ್ರ ಪುಟ ವೀಕ್ಷಣೆಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವುದು. ಇದು ಸಂಕೀರ್ಣ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗಳು, ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ಫೀಡ್‌ಗಳು, ಅಥವಾ ವಿಭಿನ್ನ ಪ್ಯಾನಲ್‌ಗಳನ್ನು ಏಕಕಾಲದಲ್ಲಿ ರೆಂಡರ್ ಮಾಡಿ ನಿರ್ವಹಿಸಬೇಕಾದ ಯಾವುದೇ UI ಗೆ ಸಾಮಾನ್ಯ ಅವಶ್ಯಕತೆಯಾಗಿದೆ.

ಪ್ಯಾರಲಲ್ ರೂಟ್ಸ್ ಎಂದರೇನು?

ಪ್ಯಾರಲಲ್ ರೂಟ್ಸ್ ಒಂದೇ ಲೇಔಟ್‌ನಲ್ಲಿ ಏಕಕಾಲದಲ್ಲಿ ಒಂದು ಅಥವಾ ಹೆಚ್ಚು ಪುಟಗಳನ್ನು ರೆಂಡರ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಈ ರೂಟ್‌ಗಳನ್ನು ಸ್ಲಾಟ್ಸ್ ಎಂಬ ವಿಶೇಷ ಫೋಲ್ಡರ್ ಸಂಪ್ರದಾಯವನ್ನು ಬಳಸಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗುತ್ತದೆ. ಸ್ಲಾಟ್‌ಗಳನ್ನು @folderName ಸಿಂಟ್ಯಾಕ್ಸ್ ಬಳಸಿ ರಚಿಸಲಾಗುತ್ತದೆ. ಅವು URL ರಚನೆಯ ಭಾಗವಾಗಿಲ್ಲ; ಬದಲಾಗಿ, ಅವುಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹತ್ತಿರದ ಹಂಚಿದ ಪೋಷಕ `layout.js` ಫೈಲ್‌ಗೆ ಪ್ರಾಪ್ಸ್ ಆಗಿ ರವಾನಿಸಲಾಗುತ್ತದೆ.

ಉದಾಹರಣೆಗೆ, ನೀವು ತಂಡದ ಚಟುವಟಿಕೆ ಫೀಡ್ ಮತ್ತು ಅನಾಲಿಟಿಕ್ಸ್ ಚಾರ್ಟ್ ಅನ್ನು ಅಕ್ಕಪಕ್ಕದಲ್ಲಿ ಪ್ರದರ್ಶಿಸಬೇಕಾದ ಲೇಔಟ್ ಹೊಂದಿದ್ದರೆ, ನೀವು ಎರಡು ಸ್ಲಾಟ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು: `@team` ಮತ್ತು `@analytics`.

ಮೂಲ ಕಲ್ಪನೆ: ಸ್ಲಾಟ್ಸ್

ಸ್ಲಾಟ್‌ಗಳನ್ನು ನಿಮ್ಮ ಲೇಔಟ್‌ನಲ್ಲಿ ಹೆಸರಿಸಲಾದ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್‌ಗಳೆಂದು ಯೋಚಿಸಿ. ಲೇಔಟ್ ಫೈಲ್ ಈ ಸ್ಲಾಟ್‌ಗಳನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಪ್ರಾಪ್ಸ್ ಆಗಿ ಸ್ವೀಕರಿಸುತ್ತದೆ ಮತ್ತು ಅವುಗಳನ್ನು ಎಲ್ಲಿ ರೆಂಡರ್ ಮಾಡಬೇಕೆಂದು ನಿರ್ಧರಿಸುತ್ತದೆ.

ಈ ಲೇಔಟ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಪರಿಗಣಿಸಿ:

// ಎರಡು ಸ್ಲಾಟ್‌ಗಳನ್ನು ಸ್ವೀಕರಿಸುವ ಲೇಔಟ್: 'team' ಮತ್ತು 'analytics'
export default function DashboardLayout({ children, team, analytics }) {
  return (
    <div>
      {children}
      <div style={{ display: 'flex' }}>
        {team}
        {analytics}
      </div>
    </div>
  );
}

ಇಲ್ಲಿ, `children`, `team`, ಮತ್ತು `analytics` ಎಲ್ಲವೂ ಸ್ಲಾಟ್‌ಗಳಾಗಿವೆ. `children` ಒಂದು ಅವ್ಯಕ್ತ ಸ್ಲಾಟ್ ಆಗಿದ್ದು, ಅದು ಡೈರೆಕ್ಟರಿಯಲ್ಲಿನ ಪ್ರಮಾಣಿತ `page.js` ಗೆ ಅನುರೂಪವಾಗಿದೆ. `team` ಮತ್ತು `analytics` ವ್ಯಕ್ತ ಸ್ಲಾಟ್‌ಗಳಾಗಿದ್ದು, ಇವುಗಳನ್ನು ಫೈಲ್ ಸಿಸ್ಟಮ್‌ನಲ್ಲಿ `@` ಪೂರ್ವಪ್ರತ್ಯಯದೊಂದಿಗೆ ರಚಿಸಬೇಕು.

ಪ್ರಮುಖ ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು ಅನುಕೂಲಗಳು

• ಸ್ವತಂತ್ರ ರೂಟ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್: ಪ್ರತಿ ಪ್ಯಾರಲಲ್ ರೂಟ್ (ಸ್ಲಾಟ್) ತನ್ನದೇ ಆದ ಲೋಡಿಂಗ್ ಮತ್ತು ಎರರ್ ಸ್ಥಿತಿಗಳನ್ನು ಹೊಂದಬಹುದು. ಇದರರ್ಥ ನಿಮ್ಮ ಅನಾಲಿಟಿಕ್ಸ್ ಪ್ಯಾನಲ್ ಲೋಡಿಂಗ್ ಸ್ಪಿನ್ನರ್ ಅನ್ನು ತೋರಿಸಬಹುದು, ಆದರೆ ಟೀಮ್ ಫೀಡ್ ಈಗಾಗಲೇ ರೆಂಡರ್ ಆಗಿರಬಹುದು, ಇದು ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ.
• ಷರತ್ತುಬದ್ಧ ರೆಂಡರಿಂಗ್: ಬಳಕೆದಾರರ ದೃಢೀಕರಣ ಸ್ಥಿತಿ ಅಥವಾ ಅನುಮತಿಗಳಂತಹ ಕೆಲವು ಷರತ್ತುಗಳ ಆಧಾರದ ಮೇಲೆ ಯಾವ ಸ್ಲಾಟ್‌ಗಳನ್ನು ರೆಂಡರ್ ಮಾಡಬೇಕೆಂದು ನೀವು ಪ್ರೋಗ್ರಾಮಿಕ್ ಆಗಿ ನಿರ್ಧರಿಸಬಹುದು.
• ಉಪ-ನ್ಯಾವಿಗೇಷನ್: ಪ್ರತಿ ಸ್ಲಾಟ್ ಅನ್ನು ಇತರ ಸ್ಲಾಟ್‌ಗಳ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರದಂತೆ ಸ್ವತಂತ್ರವಾಗಿ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಬಹುದು. ಇದು ಟ್ಯಾಬ್ ಮಾಡಿದ ಇಂಟರ್ಫೇಸ್‌ಗಳು ಅಥವಾ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗಳಿಗೆ ಪರಿಪೂರ್ಣವಾಗಿದೆ, ಅಲ್ಲಿ ಒಂದು ಪ್ಯಾನಲ್‌ನ ಸ್ಥಿತಿಯು ಇನ್ನೊಂದರಿಂದ ಸಂಪೂರ್ಣವಾಗಿ ಪ್ರತ್ಯೇಕವಾಗಿರುತ್ತದೆ.

ನೈಜ-ಪ್ರಪಂಚದ ಸನ್ನಿವೇಶ: ಒಂದು ಸಂಕೀರ್ಣ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ನಿರ್ಮಿಸುವುದು

/dashboard URL ನಲ್ಲಿ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಅನ್ನು ವಿನ್ಯಾಸಿಸೋಣ. ಇದು ಮುಖ್ಯ ವಿಷಯ ಪ್ರದೇಶ, ತಂಡದ ಚಟುವಟಿಕೆ ಪ್ಯಾನಲ್ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಅನಾಲಿಟಿಕ್ಸ್ ಪ್ಯಾನಲ್ ಅನ್ನು ಹೊಂದಿರುತ್ತದೆ.

ಫೈಲ್ ರಚನೆ:

app/
└── dashboard/
    ├── @analytics/
    │   ├── page.js          // ಅನಾಲಿಟಿಕ್ಸ್ ಸ್ಲಾಟ್‌ಗಾಗಿ UI
    │   └── loading.js     // ನಿರ್ದಿಷ್ಟವಾಗಿ ಅನಾಲಿಟಿಕ್ಸ್‌ಗಾಗಿ ಲೋಡಿಂಗ್ UI
    ├── @team/
    │   └── page.js          // ಟೀಮ್ ಸ್ಲಾಟ್‌ಗಾಗಿ UI
    ├── layout.js            // ಸ್ಲಾಟ್‌ಗಳನ್ನು ಸಂಘಟಿಸುವ ಲೇಔಟ್
    └── page.js              // ಅವ್ಯಕ್ತ 'children' ಸ್ಲಾಟ್ (ಮುಖ್ಯ ವಿಷಯ)

1. ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಲೇಔಟ್ (app/dashboard/layout.js)

ಈ ಲೇಔಟ್ ಮೂರು ಸ್ಲಾಟ್‌ಗಳನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ ಮತ್ತು ಜೋಡಿಸುತ್ತದೆ.

// app/dashboard/layout.js
export default function DashboardLayout({ children, analytics, team }) {
  const isLoggedIn = true; // ನಿಜವಾದ ದೃಢೀಕರಣ ತರ್ಕದೊಂದಿಗೆ ಬದಲಾಯಿಸಿ

  return isLoggedIn ? (
    <div>
      <h1>ಮುಖ್ಯ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್</h1>
      {children}
      <div style={{ marginTop: '20px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
        <div style={{ border: '1px solid blue', padding: '10px' }}>
          <h2>ತಂಡದ ಚಟುವಟಿಕೆ</h2>
          {team}
        </div>
        <div style={{ border: '1px solid green', padding: '10px' }}>
          <h2>ಕಾರ್ಯಕ್ಷಮತೆಯ ಅನಾಲಿಟಿಕ್ಸ್</h2>
          {analytics}
        </div>
      </div>
    </div>
  ) : (
    <div>ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ವೀಕ್ಷಿಸಲು ದಯವಿಟ್ಟು ಲಾಗಿನ್ ಮಾಡಿ.</div>
  );
}

2. ಸ್ಲಾಟ್ ಪುಟಗಳು (ಉದಾ., app/dashboard/@analytics/page.js)

ಪ್ರತಿ ಸ್ಲಾಟ್‌ನ page.js ಫೈಲ್ ಆ ನಿರ್ದಿಷ್ಟ ಪ್ಯಾನಲ್‌ಗಾಗಿ UI ಅನ್ನು ಹೊಂದಿರುತ್ತದೆ.

// app/dashboard/@analytics/page.js
async function getAnalyticsData() {
  // ನೆಟ್‌ವರ್ಕ್ ವಿನಂತಿಯನ್ನು ಅನುಕರಿಸುವುದು
  await new Promise(resolve => setTimeout(resolve, 3000));
  return { views: '1.2M', revenue: '$50,000' };
}

export default async function AnalyticsPage() {
  const data = await getAnalyticsData();
  return (
    <div>
      <p>ಪುಟ ವೀಕ್ಷಣೆಗಳು: {data.views}</p>
      <p>ಆದಾಯ: {data.revenue}</p>
    </div>
  );
}

// app/dashboard/@analytics/loading.js
export default function Loading() {
  return <p>ಅನಾಲಿಟಿಕ್ಸ್ ಡೇಟಾ ಲೋಡ್ ಆಗುತ್ತಿದೆ...</p>;
}

ಈ ಸೆಟಪ್‌ನೊಂದಿಗೆ, ಬಳಕೆದಾರರು /dashboard ಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿದಾಗ, Next.js `DashboardLayout` ಅನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ. ಲೇಔಟ್ dashboard/page.js, dashboard/@team/page.js, ಮತ್ತು dashboard/@analytics/page.js ನಿಂದ ರೆಂಡರ್ ಮಾಡಿದ ವಿಷಯವನ್ನು ಪ್ರಾಪ್ಸ್ ಆಗಿ ಸ್ವೀಕರಿಸುತ್ತದೆ ಮತ್ತು ಅವುಗಳನ್ನು ಅದಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಇರಿಸುತ್ತದೆ. ಮುಖ್ಯವಾಗಿ, ಅನಾಲಿಟಿಕ್ಸ್ ಪ್ಯಾನಲ್ ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ನ ಉಳಿದ ಭಾಗದ ರೆಂಡರಿಂಗ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸದೆ 3 ಸೆಕೆಂಡುಗಳ ಕಾಲ ತನ್ನದೇ ಆದ `loading.js` ಸ್ಥಿತಿಯನ್ನು ತೋರಿಸುತ್ತದೆ.

default.js ನೊಂದಿಗೆ ಹೊಂದಾಣಿಕೆಯಾಗದ ರೂಟ್‌ಗಳನ್ನು ನಿಭಾಯಿಸುವುದು

ಒಂದು ನಿರ್ಣಾಯಕ ಪ್ರಶ್ನೆ ಉದ್ಭವಿಸುತ್ತದೆ: ಪ್ರಸ್ತುತ URL ಗಾಗಿ ಸ್ಲಾಟ್‌ನ ಸಕ್ರಿಯ ಸ್ಥಿತಿಯನ್ನು Next.js ಹಿಂಪಡೆಯಲು ಸಾಧ್ಯವಾಗದಿದ್ದರೆ ಏನಾಗುತ್ತದೆ? ಉದಾಹರಣೆಗೆ, ಆರಂಭಿಕ ಲೋಡ್ ಅಥವಾ ಪುಟದ ಮರುಲೋಡ್ ಸಮಯದಲ್ಲಿ, URL /dashboard ಆಗಿರಬಹುದು, ಇದು @team ಅಥವಾ `@analytics` ಸ್ಲಾಟ್‌ಗಳ ಒಳಗೆ ಏನು ತೋರಿಸಬೇಕು ಎಂಬುದರ ಕುರಿತು ನಿರ್ದಿಷ್ಟ ಸೂಚನೆಗಳನ್ನು ಒದಗಿಸುವುದಿಲ್ಲ. ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, Next.js 404 ದೋಷವನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.

ಇದನ್ನು ತಡೆಗಟ್ಟಲು, ನಾವು ಪ್ಯಾರಲಲ್ ರೂಟ್‌ನೊಳಗೆ default.js ಫೈಲ್ ಅನ್ನು ರಚಿಸುವ ಮೂಲಕ ಫಾಲ್‌ಬ್ಯಾಕ್ UI ಅನ್ನು ಒದಗಿಸಬಹುದು.

ಉದಾಹರಣೆ:

// app/dashboard/@analytics/default.js
export default function DefaultAnalyticsPage() {
  return (
    <div>
      <p>ಯಾವುದೇ ಅನಾಲಿಟಿಕ್ಸ್ ಡೇಟಾವನ್ನು ಆಯ್ಕೆ ಮಾಡಲಾಗಿಲ್ಲ.</p>
    </div>
  );
}

ಈಗ, ಅನಾಲಿಟಿಕ್ಸ್ ಸ್ಲಾಟ್ ಹೊಂದಾಣಿಕೆಯಾಗದಿದ್ದರೆ, Next.js 404 ಪುಟದ ಬದಲಿಗೆ `default.js` ನ ವಿಷಯವನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ. ಇದು ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ರಚಿಸಲು ಅತ್ಯಗತ್ಯವಾಗಿದೆ, ವಿಶೇಷವಾಗಿ ಸಂಕೀರ್ಣ ಪ್ಯಾರಲಲ್ ರೂಟ್ ಸೆಟಪ್‌ನ ಆರಂಭಿಕ ಲೋಡ್‌ನಲ್ಲಿ.

ಮುಂದುವರಿದ ಆರ್ಕಿಟೆಕ್ಚರ್‌ಗಳಿಗಾಗಿ ರೂಟ್ ಗ್ರೂಪ್ಸ್ ಮತ್ತು ಪ್ಯಾರಲಲ್ ರೂಟ್ಸ್ ಅನ್ನು ಸಂಯೋಜಿಸುವುದು

ಆ್ಯಪ್ ರೂಟರ್‌ನ ನಿಜವಾದ ಶಕ್ತಿಯನ್ನು ನೀವು ಅದರ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಸಂಯೋಜಿಸಿದಾಗ ಅರಿತುಕೊಳ್ಳಲಾಗುತ್ತದೆ. ರೂಟ್ ಗ್ರೂಪ್ಸ್ ಮತ್ತು ಪ್ಯಾರಲಲ್ ರೂಟ್ಸ್ ಅತ್ಯಾಧುನಿಕ ಮತ್ತು ಹೆಚ್ಚು ಸಂಘಟಿತ ಅಪ್ಲಿಕೇಶನ್ ಆರ್ಕಿಟೆಕ್ಚರ್‌ಗಳನ್ನು ರಚಿಸಲು ಸುಂದರವಾಗಿ ಒಟ್ಟಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ.

ಬಳಕೆಯ ಪ್ರಕರಣ: ಒಂದು ಬಹು-ಮಾದರಿ ವಿಷಯ ವೀಕ್ಷಕ

ಮೀಡಿಯಾ ಗ್ಯಾಲರಿ ಅಥವಾ ಡಾಕ್ಯುಮೆಂಟ್ ವೀಕ್ಷಕದಂತಹ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ, ಅಲ್ಲಿ ಬಳಕೆದಾರರು ಒಂದು ಐಟಂ ಅನ್ನು ವೀಕ್ಷಿಸಬಹುದು ಆದರೆ ಹಿನ್ನೆಲೆ ಪುಟದ ಸಂದರ್ಭವನ್ನು ಕಳೆದುಕೊಳ್ಳದೆ ಅದರ ವಿವರಗಳನ್ನು ನೋಡಲು ಮಾದರಿ ವಿಂಡೋವನ್ನು ತೆರೆಯಬಹುದು. ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ "ಇಂಟರ್ಸೆಪ್ಟಿಂಗ್ ರೂಟ್" ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ ಮತ್ತು ಇದು ಪ್ಯಾರಲಲ್ ರೂಟ್‌ಗಳ ಮೇಲೆ ನಿರ್ಮಿಸಲಾದ ಶಕ್ತಿಯುತ ಮಾದರಿಯಾಗಿದೆ.

ಒಂದು ಫೋಟೋ ಗ್ಯಾಲರಿಯನ್ನು ರಚಿಸೋಣ. ನೀವು ಫೋಟೋವನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಅದು ಮಾದರಿಯಲ್ಲಿ ತೆರೆಯುತ್ತದೆ. ಆದರೆ ನೀವು ಪುಟವನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಿದರೆ ಅಥವಾ ಫೋಟೋದ URL ಗೆ ನೇರವಾಗಿ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿದರೆ, ಅದು ಆ ಫೋಟೋಗೆ ಮೀಸಲಾದ ಪುಟವನ್ನು ತೋರಿಸಬೇಕು.

ಫೈಲ್ ರಚನೆ:

app/
├── @modal/(..)(..)photos/[id]/page.js  // ಮೋಡಲ್‌ಗಾಗಿ ತಡೆಹಿಡಿಯಲಾದ ರೂಟ್
├── photos/
│   └── [id]/
│       └── page.js                  // ಮೀಸಲಾದ ಫೋಟೋ ಪುಟ
├── layout.js                        // @modal ಸ್ಲಾಟ್ ಅನ್ನು ಸ್ವೀಕರಿಸುವ ರೂಟ್ ಲೇಔಟ್
└── page.js                          // ಮುಖ್ಯ ಗ್ಯಾಲರಿ ಪುಟ

ವಿವರಣೆ:

• ನಾವು `@modal` ಹೆಸರಿನ ಪ್ಯಾರಲಲ್ ರೂಟ್ ಸ್ಲಾಟ್ ಅನ್ನು ರಚಿಸುತ್ತೇವೆ.
• ವಿಚಿತ್ರವಾಗಿ ಕಾಣುವ ಪಥ (..)(..)photos/[id], `photos/[id]` ರೂಟ್ ಅನ್ನು ಎರಡು ಹಂತಗಳ ಮೇಲಿನಿಂದ (ರೂಟ್‌ನಿಂದ) ಹೊಂದಿಸಲು "ಕ್ಯಾಚ್-ಆಲ್ ಸೆಗ್ಮೆಂಟ್ಸ್" ಎಂಬ ಸಂಪ್ರದಾಯವನ್ನು ಬಳಸುತ್ತದೆ.
• ಬಳಕೆದಾರರು ಮುಖ್ಯ ಗ್ಯಾಲರಿ ಪುಟದಿಂದ (/) ಫೋಟೋಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿದಾಗ, Next.js ಈ ನ್ಯಾವಿಗೇಷನ್ ಅನ್ನು ತಡೆಹಿಡಿಯುತ್ತದೆ ಮತ್ತು ಪೂರ್ಣ ಪುಟ ನ್ಯಾವಿಗೇಷನ್ ಮಾಡುವ ಬದಲು ಮೋಡಲ್‌ನ ಪುಟವನ್ನು `@modal` ಸ್ಲಾಟ್‌ನಲ್ಲಿ ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.
• ಮುಖ್ಯ ಗ್ಯಾಲರಿ ಪುಟವು ಲೇಔಟ್‌ನ `children` ಪ್ರಾಪ್‌ನಲ್ಲಿ ಗೋಚರಿಸುತ್ತದೆ.
• ಬಳಕೆದಾರರು ನೇರವಾಗಿ /photos/123 ಗೆ ಭೇಟಿ ನೀಡಿದರೆ, ತಡೆಹಿಡಿಯುವಿಕೆ ಪ್ರಚೋದಿಸುವುದಿಲ್ಲ, ಮತ್ತು photos/[id]/page.js ನಲ್ಲಿರುವ ಮೀಸಲಾದ ಪುಟವು ಸಾಮಾನ್ಯವಾಗಿ ರೆಂಡರ್ ಆಗುತ್ತದೆ.

ಈ ಮಾದರಿಯು ಪ್ಯಾರಲಲ್ ರೂಟ್‌ಗಳನ್ನು (@modal ಸ್ಲಾಟ್) ಮುಂದುವರಿದ ರೂಟಿಂಗ್ ಸಂಪ್ರದಾಯಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿ, ಕೈಯಾರೆ ಕಾರ್ಯಗತಗೊಳಿಸಲು ತುಂಬಾ ಸಂಕೀರ್ಣವಾದ ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ರಚಿಸುತ್ತದೆ.

ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಸಾಮಾನ್ಯ ಅಪಾಯಗಳು

ರೂಟ್ ಗ್ರೂಪ್ಸ್ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

• ವಿವರಣಾತ್ಮಕ ಹೆಸರುಗಳನ್ನು ಬಳಸಿ: ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ ರಚನೆಯನ್ನು ಸ್ವಯಂ-ದಾಖಲಿಸುವಂತೆ ಮಾಡಲು (auth), (marketing), ಅಥವಾ (protected) ನಂತಹ ಅರ್ಥಪೂರ್ಣ ಹೆಸರುಗಳನ್ನು ಆಯ್ಕೆಮಾಡಿ.
• ಸಾಧ್ಯವಾದಲ್ಲೆಲ್ಲಾ ಸಮತಟ್ಟಾಗಿಡಿ: ರೂಟ್ ಗ್ರೂಪ್‌ಗಳ ಅತಿಯಾದ ನೆಸ್ಟಿಂಗ್ ಅನ್ನು ತಪ್ಪಿಸಿ. ಸಮತಟ್ಟಾದ ರಚನೆಯು ಸಾಮಾನ್ಯವಾಗಿ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಸುಲಭವಾಗಿರುತ್ತದೆ.
• ಅವುಗಳ ಉದ್ದೇಶವನ್ನು ನೆನಪಿಡಿ: ಅವುಗಳನ್ನು ಲೇಔಟ್ ವಿಭಜನೆ ಮತ್ತು ಸಂಘಟನೆಗಾಗಿ ಬಳಸಿ, URL ಸೆಗ್ಮೆಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಅಲ್ಲ.

ಪ್ಯಾರಲಲ್ ರೂಟ್ಸ್ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

• ಯಾವಾಗಲೂ default.js ಅನ್ನು ಒದಗಿಸಿ: ಪ್ಯಾರಲಲ್ ರೂಟ್‌ಗಳ ಯಾವುದೇ ಗಂಭೀರ ಬಳಕೆಗಾಗಿ, ಆರಂಭಿಕ ಲೋಡ್‌ಗಳು ಮತ್ತು ಹೊಂದಾಣಿಕೆಯಾಗದ ಸ್ಥಿತಿಗಳನ್ನು ಸುಲಲಿತವಾಗಿ ನಿರ್ವಹಿಸಲು default.js ಫೈಲ್ ಅನ್ನು ಸೇರಿಸಿ.
• ಗ್ರ್ಯಾನ್ಯುಲರ್ ಲೋಡಿಂಗ್ ಸ್ಥಿತಿಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳಿ: ಬಳಕೆದಾರರಿಗೆ ತ್ವರಿತ ಪ್ರತಿಕ್ರಿಯೆ ನೀಡಲು ಮತ್ತು UI ವಾಟರ್‌ಫಾಲ್‌ಗಳನ್ನು ತಡೆಯಲು ಪ್ರತಿ ಸ್ಲಾಟ್‌ನ ಡೈರೆಕ್ಟರಿಯೊಳಗೆ loading.js ಫೈಲ್ ಅನ್ನು ಇರಿಸಿ.
• ಸ್ವತಂತ್ರ UI ಗಾಗಿ ಬಳಸಿ: ಪ್ರತಿ ಸ್ಲಾಟ್‌ನ ವಿಷಯವು ನಿಜವಾಗಿಯೂ ಸ್ವತಂತ್ರವಾಗಿದ್ದಾಗ ಪ್ಯಾರಲಲ್ ರೂಟ್‌ಗಳು ಹೊಳೆಯುತ್ತವೆ. ಪ್ಯಾನಲ್‌ಗಳು ಆಳವಾಗಿ ಪರಸ್ಪರ ಸಂಬಂಧ ಹೊಂದಿದ್ದರೆ, ಒಂದೇ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀ ಮೂಲಕ ಪ್ರಾಪ್ಸ್ ಅನ್ನು ರವಾನಿಸುವುದು ಸರಳ ಪರಿಹಾರವಾಗಿರಬಹುದು.

ತಪ್ಪಿಸಬೇಕಾದ ಸಾಮಾನ್ಯ ಅಪಾಯಗಳು

• ಸಂಪ್ರದಾಯಗಳನ್ನು ಮರೆಯುವುದು: ರೂಟ್ ಗ್ರೂಪ್‌ಗಳಿಗಾಗಿ ಆವರಣಗಳನ್ನು () ಅಥವಾ ಪ್ಯಾರಲಲ್ ರೂಟ್ ಸ್ಲಾಟ್‌ಗಳಿಗಾಗಿ ಅಟ್-ಚಿಹ್ನೆಯನ್ನು @ ಮರೆಯುವುದು ಒಂದು ಸಾಮಾನ್ಯ ತಪ್ಪು. ಇದು ಅವುಗಳನ್ನು ಸಾಮಾನ್ಯ URL ಸೆಗ್ಮೆಂಟ್‌ಗಳಾಗಿ ಪರಿಗಣಿಸಲು ಕಾರಣವಾಗುತ್ತದೆ.
• default.js ಅನ್ನು ಕಳೆದುಕೊಳ್ಳುವುದು: ಪ್ಯಾರಲಲ್ ರೂಟ್‌ಗಳೊಂದಿಗೆ ಅತ್ಯಂತ ಆಗಾಗ್ಗೆ ಬರುವ ಸಮಸ್ಯೆಯೆಂದರೆ, ಹೊಂದಾಣಿಕೆಯಾಗದ ಸ್ಲಾಟ್‌ಗಳಿಗೆ ಫಾಲ್‌ಬ್ಯಾಕ್ default.js ಅನ್ನು ಒದಗಿಸದ ಕಾರಣ ಅನಿರೀಕ್ಷಿತ 404 ದೋಷಗಳನ್ನು ನೋಡುವುದು.
• children ಅನ್ನು ತಪ್ಪಾಗಿ ಅರ್ಥೈಸಿಕೊಳ್ಳುವುದು: ಪ್ಯಾರಲಲ್ ರೂಟ್‌ಗಳನ್ನು ಬಳಸುವ ಲೇಔಟ್‌ನಲ್ಲಿ, `children` ಕೇವಲ ಒಂದು ಸ್ಲಾಟ್ ಎಂದು ನೆನಪಿಡಿ, ಅದು ಅದೇ ಡೈರೆಕ್ಟರಿಯಲ್ಲಿನ `page.js` ಅಥವಾ ನೆಸ್ಟೆಡ್ ಲೇಔಟ್‌ಗೆ ಅವ್ಯಕ್ತವಾಗಿ ಮ್ಯಾಪ್ ಆಗಿರುತ್ತದೆ.

ತೀರ್ಮಾನ: ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಭವಿಷ್ಯವನ್ನು ನಿರ್ಮಿಸುವುದು

Next.js ಆ್ಯಪ್ ರೂಟರ್, ರೂಟ್ ಗ್ರೂಪ್ಸ್ ಮತ್ತು ಪ್ಯಾರಲಲ್ ರೂಟ್ಸ್ ನಂತಹ ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ, ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಗೆ ದೃಢವಾದ ಮತ್ತು ವಿಸ್ತರಿಸಬಲ್ಲ ಅಡಿಪಾಯವನ್ನು ಒದಗಿಸುತ್ತದೆ. ರೂಟ್ ಗ್ರೂಪ್ಸ್ URL ಶಬ್ದಾರ್ಥವನ್ನು ರಾಜಿ ಮಾಡಿಕೊಳ್ಳದೆ ಕೋಡ್ ಅನ್ನು ಸಂಘಟಿಸಲು ಮತ್ತು ವಿಭಿನ್ನ ಲೇಔಟ್‌ಗಳನ್ನು ಅನ್ವಯಿಸಲು ಒಂದು ಸೊಗಸಾದ ಪರಿಹಾರವನ್ನು ನೀಡುತ್ತದೆ. ಪ್ಯಾರಲಲ್ ರೂಟ್ಸ್ ಸ್ವತಂತ್ರ ಸ್ಥಿತಿಗಳೊಂದಿಗೆ ಡೈನಾಮಿಕ್, ಬಹು-ಪ್ಯಾನಲ್ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ಅನ್ಲಾಕ್ ಮಾಡುತ್ತದೆ, ಇದು ಹಿಂದೆ ಸಂಕೀರ್ಣ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ಮೂಲಕ ಮಾತ್ರ ಸಾಧಿಸಬಹುದಾಗಿತ್ತು.

ಈ ಶಕ್ತಿಯುತ ಆರ್ಕಿಟೆಕ್ಚರಲ್ ಮಾದರಿಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಂಡು ಮತ್ತು ಸಂಯೋಜಿಸುವ ಮೂಲಕ, ನೀವು ಸರಳ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ಮೀರಿ ಸಾಗಬಹುದು ಮತ್ತು ಇಂದಿನ ಬಳಕೆದಾರರ ಬೇಡಿಕೆಗಳನ್ನು ಪೂರೈಸುವ ಅತ್ಯಾಧುನಿಕ, ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಪ್ರಾರಂಭಿಸಬಹುದು. ಕ್ಲಾಸಿಕ್ ಪೇಜಸ್ ರೂಟರ್‌ಗಿಂತ ಕಲಿಕೆಯ ರೇಖೆಯು ಕಡಿದಾಗಿರಬಹುದು, ಆದರೆ ಅಪ್ಲಿಕೇಶನ್ ಆರ್ಕಿಟೆಕ್ಚರ್ ಮತ್ತು ಬಳಕೆದಾರ ಅನುಭವದ ದೃಷ್ಟಿಯಿಂದ ಪ್ರತಿಫಲವು ಅಪಾರವಾಗಿದೆ. ನಿಮ್ಮ ಮುಂದಿನ ಪ್ರಾಜೆಕ್ಟ್‌ನಲ್ಲಿ ಈ ಪರಿಕಲ್ಪನೆಗಳೊಂದಿಗೆ ಪ್ರಯೋಗವನ್ನು ಪ್ರಾರಂಭಿಸಿ ಮತ್ತು Next.js ನ ಸಂಪೂರ್ಣ ಸಾಮರ್ಥ್ಯವನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ.